<template>
  <div class="center-wrapper">
    <div class="center-container">
      <PersonHead :tabs="tabs" @tabClick="handleTabClick" />
      <div>
        <component :is="currentTabComp" @change="handleChange" :page="currentPage" :pageSize="pageSize" @update-total="updateTotal" />
      </div>
    </div>
    <div class="pagination">
      <Pagination 
        :total="total" 
        :current-page="currentPage" 
        :page-size="pageSize" 
        @current-change="handlePageChange" 
        @size-change="handleSizeChange" />
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import PersonHead from "@/components/PersonHead";
import Pagination from "@/components/Pagination";
import ShortAndLongSentences from "./ShortAndLongSentences";

const currentTabComp = ref(null);
const paginationHideList = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

const tabs = ref([
  {
    label: "长短句",
    type: "shortAndLongSentences",
  },
]);

const handleTabClick = ({ item: { type } }) => {
  paginationHideList.value = [type];
  const componentKeys = {
    shortAndLongSentences: ShortAndLongSentences,
  };
  currentTabComp.value = componentKeys[type] || ShortAndLongSentences;
  // 切换标签时重置分页
  currentPage.value = 1;
};

const handleChange = () => {
  // 如有需要可以在此处添加逻辑
};

const handlePageChange = (page) => {
  currentPage.value = page;
};

const handleSizeChange = (size) => {
  pageSize.value = size;
  currentPage.value = 1; // 改变页面大小时重置到第一页
};

const updateTotal = (newTotal) => {
  total.value = newTotal;
};

// 初始化加载第一个标签
onMounted(() => {
  handleTabClick({ item: tabs.value[0] });
});
</script>

<style scoped lang="scss">
.center-wrapper {
  display: flex;
  flex-direction: column;
}

.center-container {
}

.pagination {
  margin-bottom: 15px !important;
}
</style>
